<template>
        <div id="play_window"  :element-loading-text="'加载中...'" :element-loading-background="'transparent'" v-loading="loading" ></div>
</template>
<script setup>
import { onMounted } from 'vue';
import '../../../static/h5player.min.js'
import {ElMessage} from 'element-plus'
const props = defineProps({
    playURL: {
      type: String,
      required: true
    }
  })
watch(()=>props.playURL,()=>{
    if(props.playURL){
        playVideo()
    }
})
const loading = ref(false)
var curIndex = 0; // 当前窗口下标
var myPlugin
const playVideo = ()=>{
    let startTime, endTime;
    loading.value = true;
    myPlugin.JS_Play(
        props.playURL,
    {
        playURL: props.playURL, // 流媒体播放时必传
        mode: 1, // 解码类型：0=普通模式; 1=高级模式 默认为0
        PlayBackMode: 1,//1：绝对时间正放; 3 绝对时间倒放 默认为1
        keepDecoder:0, // 0:回收解码资源; 1:不回收解码资源。为1时相同的编码格式，通过直接调用js_play接口切换点位不黑屏。默认0
        // token: token, //开启安全认证使用的token，在后端开启安全认证时使用
        // ...
    },
    curIndex, //当前窗口下标
    // 回放参数
    startTime,
    endTime
    ).then(
    () => {
    loading.value = false
        console.info('JS_Play success');
        // do you want...
    },
    (err) => {
    loading.value = false
        console.info('JS_Play failed:', err);
        // do you want...
        ElMessage.error(err)
    }
    );
}
onMounted(()=>{
    myPlugin = new JSPlugin({
      szId: 'play_window', //父窗口id，需要英文字母开头 必填
      szBasePath: '../../../static/h5player.min.js', // 必填,与h5player.min.js的引用目录一致
      mseWorkerEnable: false,//是否开启多线程解码，分辨率大于1080P建议开启，否则可能卡顿
			bSupporDoubleClickFull: true,//是否支持双击全屏，true-双击是全屏；false-双击无响应
      // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
    //   iWidth: 600,
    //   iHeight: 400,

      // 分屏播放，默认最大分屏4*4
      // iMaxSplit: 4,
      // iCurrentSplit: 1,
    })

    if(props.playURL){
        // playVideo()
    }
})

</script>

<style lang="scss" scoped>
#play_window{
    width:100%;
    height:95%
}
:deep(.sub-wnd){
    border:none !important;
}
</style>